const TodoListItem = {
  template: `
    <div :class="['list-item']">
      <input type="checkbox" :checked="item.completed" @change="toggle(item.id)" />
      <span class="content">{{ item.title }}-{{ item.completed ? '已' : '未' }}完成</span>
      <button @click="remove(item.id)">删除</button>
    </div>
  `,
  props: ['item'],
  inject: ['remove', 'toggle'],
}

// <button @click="item = {id: 1, title: 'abc', completed: true}">修改</button>

export default TodoListItem
